<template>
  <el-card shadow="never">
    <el-form ref="formRef" :model="formData" label-width="70px" class="search-form" :inline="true">
      <el-form-item label="时间筛选" class="time-box">
        <el-button plain :type="currentId == '1' ? 'primary' : ''" @click="selectTime('1')">昨天</el-button>
        <el-button plain :type="currentId == '2' ? 'primary' : ''" @click="selectTime('2')">最近7天</el-button>
        <el-button plain :type="currentId == '3' ? 'primary' : ''" @click="selectTime('3')">最近30天</el-button>
        <el-date-picker
          v-model="time"
          type="datetimerange"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          @change="changeTime"
          range-separator="—"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          class="date-picker-item"
        />
      </el-form-item>
      <el-form-item label="选择成员和部门" class="selectMembers" label-width="110">
        <el-select v-model="formData.member" popper-class="zw-hide_select_option" placeholder="全部" multiple collapse-tags collapse-tags-tooltip class="Select" @click="openDepart" @change="changeDepart">
          <el-option v-for="item in creators" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(formRef)">查询</el-button>
        <el-button @click="resetForm(formRef)">清空</el-button>
      </el-form-item>
    </el-form>
    <!-- 部门人员弹框 -->
    <ZWDepart ref="DepartRef" @submit="getDepart" />
    <!-- 标签弹框 -->
    <ZWSelectTag ref="searchSelectRef" @submit="getTags" />
  </el-card>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, watch } from 'vue'
  import ZWDepart from '@/components/ZWDepart.vue'
  import ZWSelectTag from '@/components/ZWSelectTag.vue'
  import { getSetionId, getDay, DFormat } from '@/utils/utils'
  //import { getDay } from '@/utils/timeCycle'
  import type { ElForm } from 'element-plus'
  import { useStore } from '@/store'
  const store = useStore()
  const emit = defineEmits(['searchData'])
  // 创建人options
  const creators = ref([])
  const currentId = ref('2') // 选择最近天数的 id
  const value = ref('')
  const DepartRef = ref(null)
  const time = ref([getDay(-6), getDay(0, true)])
  // 收集的表单数据
  const formData = reactive({
    member: [],
    departments: [],
    users: [],
    date1: getDay(-6),
    date2: getDay(0, true)
  })
  const changeTime = (v: any) => {
    formData.date1 = v[0]
    formData.date2 = v[1]
  }
  // 查询按钮
  const submitForm = (data: any) => {
    console.log('查询', formData)
    emit('searchData', formData)
  }
  // 选择最近时间
  const selectTime = (v: any) => {
    currentId.value = v
    switch (v) {
      case '1':
        formData.date1 = getDay(-1)
        formData.date2 = getDay(-1, true)
        time.value = [getDay(-1), getDay(-1, true)]
        break
      case '2':
        formData.date1 = getDay(-6)
        formData.date2 = getDay(0, true)
        time.value = [getDay(-6), getDay(0, true)]
        break
      case '3':
        formData.date1 = getDay(-29)
        formData.date2 = getDay(0, true)
        time.value = [getDay(-29), getDay(0, true)]
        break
    }
    submitForm()
  }

  // 清空
  const resetForm = (formEl: any) => {
    time.value = [getDay(-6), getDay(0, true)]
    currentId.value = '2'
    formData.member = []
    formData.users = []
    creators.value = []
    formData.date1 = getDay(-6)
    formData.date2 = getDay(0, true)
    emit('searchData', formData)
  }
  //打开新建选择人
  const openDepart = () => {
    console.log(creators.value, '-----DepartRef.value')
    DepartRef.value.title = '部门人员信息'
    DepartRef.value.departVisble = true
    DepartRef.value.isMember = false // 可以选择部门
    DepartRef.value.selectedMember = creators.value
    // DepartRef.value.depart = DepartRef.value.clean(DepartRef.value.depart)
    // creators.value.forEach((item: any, index: any) => {
    //   DepartRef.value.leftchecktree(item.id)
    // })
  }

  const changeDepart = (data: any) => {
    formData.departments = []
    formData.users = []
    let removeDepart = creators.value.find((item: any) => !data.includes(item.id))
    let arr: any[] = creators.value.filter((item: any) => data.includes(item.id))
    arr.forEach((item: any) => {
      if (item.type == 'department') {
        formData.departments.push(item.id)
      } else {
        formData.users.push(item.id)
      }
    })
    formData.member = getSetionId('id', arr)
    creators.value = arr
    DepartRef.value.removeItem(removeDepart)
  }
  // 获取部门成员
  const getDepart = (res: any) => {
    formData.departments = []
    formData.users = []
    creators.value = res
    formData.member = getSetionId('id', creators.value)
    res.forEach((item: any) => {
      if (item.type == 'department') {
        formData.departments.push(item.id)
      } else {
        formData.users.push(item.id)
      }
    })
    DepartRef.value.departVisble = false
  }
  // watch(
  //   () => currentId.value,
  //   (oVal, nVal) => {
  //     formData.date1 = getDay(currentId.value)
  //     formData.date2 = getDay(0, true)
  //   },
  //   {
  //     deep: true,
  //     immediate: true
  //   }
  // )
  // 检查时间是否正确
  const checkTimeFun = () => {
    // if (formData.date1 && formData.date2) {
    //   if (new Date(formData.date1.replace(/-/g, '/')).getTime() > new Date(formData.date2.replace(/-/g, '/')).getTime()) {
    //     let time = formData.date1
    //     formData.date1 = formData.date2
    //     formData.date2 = time
    //   }
    // }
  }
</script>

<style lang="scss" scoped>
  .search-form {
    :deep(.el-form-item) {
      margin-bottom: 0;
      .date-picker-item {
        max-width: 360px;
        margin-left: 10px;
      }
    }
  }
</style>
